<% include('./includes/meta<!-- @echo envFile -->.html', {
  page: 'detail',
  styles: ['base.css', 'case.css']
}) %>
</head>
<body class="page-case">
<div class="g-container">
  <% include('./includes/alone_nav<!-- @echo envFile -->.html', {
    active: 'case'
  }) %>
  <div class="g-title">
    <h3>定制案例</h3>
    <p>custom case</p>
  </div>
  <div class="g-mao">
    <img src="/@@/images/about/mao1.png" alt="">
    <img src="/@@/images/about/mao2.png" alt="">
    <img src="/@@/images/about/mao3.png" alt="">
  </div>
  <div class="g-slogan">
    <img src="/@@/images/case/text.png" alt="">
  </div>
  <div class="case-wrap">
    <div class="swiper-container case-slider" id="case-slider">
      <% include('./includes/product_list<!-- @echo envFile -->.html') %>
    </div>
    <!-- Add Pagination -->
    <div class="case-scrollbar" id="caseBar"><i class="bar"></i></div>
  </div>
  <div class="case-slider-prev"></div>
  <div class="case-slider-next"></div>
  <% include('./includes/product_list_cate<!-- @echo envFile -->.html') %>
</div>

{{include "./includes/foot.html" }}
<link href="//cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/Swiper/4.2.0/js/swiper.min.js"></script>
<link href="//cdn.bootcss.com/fancybox/3.2.5/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<script>
var caseSlider = new Swiper('#case-slider', {
  slidesPerView: 4,
  slidesPerColumn: 2,
  spaceBetween: 30,
  slideToClickedSlide: false,
  on: {
    init: function () {
      sliderBar(this.activeIndex, this.snapGrid.length, 'init')
    },
    slideChange: function() {
      sliderBar(this.activeIndex, this.snapGrid.length)
    }
  },
  navigation: {
    nextEl: '.case-slider-next',
    prevEl: '.case-slider-prev'
  }
})

$(function () {
  $('#case-droplist').on('mouseenter', function() {
    $(this).addClass('active').find('.droplist').slideDown(300)
  }).on('mouseleave', function() {
    $(this).removeClass('active').find('.droplist').slideUp(300)
  })

  $('[data-view-case]').on('click', function() {
    var $this = $(this), imgs = []
    var _arr = $this.find('input').val().split(',')
    _arr.pop()
    if (_arr.length === 0) {
      return alert('暂未上传图片')
    }
    _arr.forEach(function(v, k) {
      imgs.push({src: v})
    })
    $.fancybox.open(imgs, {
        loop: false,
        caption: $this.attr('data-title'),
        buttons: ['fullScreen', 'thumbs', 'close']
      })
  })
})

function sliderBar(index, count, state) {
  var unit = 100 / count
  var $bar = $('#caseBar').find('.bar')
  if (state === 'init') {
    $bar.width(unit + '%')
  }
  $bar.css('left', unit * index + '%')
}
</script>
{{include "./includes/bodyEnd.html" }}